<!--
 * @Author: ChunLai
 * @Date: 2022-03-29 10:48:07
 * @LastEditTime: 2025-08-21 14:58:40
 * @Description: 保费预试算页面
 * @FilePath: \02.bldinsure\src\views\count\index.vue
-->
<template>
  <div class="count-pre-md pdbt_100" :class="{ disabledForm: disabledEdit }">
    <!-- 用户信息 -->
    <div class="head_tit">被保人信息</div>
    <UserModule />
    <!-- 险种信息 -->
    <div class="head_tit">投保方案</div>
    <div>
      <InsuItem
        v-for="(mainRisk, index) in mainInsu_e"
        :insuData="mainRisk"
        :key="`pre-zhu${index + totalPrem + new Date().getTime()}`"
      ></InsuItem>
    </div>
    <template v-if="subInsu_e.length > 0">
      <div class="head_tit">附加可选</div>
      <div>
        <InsuItem
          v-for="(mainRisk, index) in subInsu_e"
          :insuData="mainRisk"
          :key="`pre-sub${index + totalPrem + new Date().getTime()}`"
        ></InsuItem>
      </div>
    </template>
    <div class="fix_foot_box bottomBoxBar">
      <div class="cellBtns">
        <div class="feeBox">
          <span class="preNum font2">{{ totalPrem }}</span>
          <span class="ml2 ftc4 mt6">元</span>
        </div>
        <div class="sureBtn" @click="nextAction">下一步</div>
      </div>
    </div>
    <RrwebIgnorePop ref="ignoreRef" @close="show = false" v-if="show" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserModule from "./components/UserModule";
import InsuItem from "./components/InsuItem";
import RrwebIgnorePop from "@/views/index/feecount/RrwebIgnorePop";
import AgentSyncBtn from "@/components/agentSyncBtn";
import { InsureBtnHandleMixin } from "@/mixins/info_bill.js";

export default {
  name: "CountIndex",
  data() {
    return {
      show: false,
    };
  },
  components: {
    AgentSyncBtn,
    UserModule,
    InsuItem,
    RrwebIgnorePop,
  },
  computed: {
    ...mapGetters({
      mainInsu_e: "risks/mainInsu",
      subInsu_e: "risks/subRisk",
      totalPrem: "insert/totalPrem",
      bbrMaxNum: "page/bbrMaxNum",
    }),
  },
  mixins: [InsureBtnHandleMixin],
  created() {
    this.show = false;
    this.$store.dispatch("insert/initNewBbr");
  },
  mounted() {},
  methods: {
    nextAction() {
      if (this.disabledEdit) {
        this.forbidChange();
        return;
      }
      this.$store.commit("updateLoad", true);
      this.$http
        .post("ms-insure/api/bilaiduo/getRechargeMoney", {
          userId: this.bldUserId,
        })
        .then(({ data }) => {
          if (Number(this.totalPrem) > Number(data.money)) {
            this.show = true;
            this.$nextTick(() => {
              this.$refs.ignoreRef.initModal("1");
            });
          } else {
            this.nextRouterMixin();
          }
        })
        .finally((error) => {
          this.$store.commit("updateLoad", false);
        });
    },
    changDatas(code, type, val) {
      this.$store.dispatch("risks/setRisks", {
        varietyCode: code,
        type: type,
        val: val,
      });
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="less" scoped>
.cell3_main {
  padding: 0 12px;
  background-color: #fff;
  .cell3Item {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    min-height: 40px;
    border-bottom: 1px solid #ededed;

    .cell3_label {
      display: flex;
      flex: 1;
      line-height: 1.3;
      color: #747474;
    }

    .cell3_value {
      display: flex;
      justify-content: flex-end;
    }
  }
}

.head_tit {
  display: flex;
  align-items: center;
  height: 40px;
  color: #242424;
  line-height: 1;
  font-size: 15px;
  font-weight: 600;
  font-family: MiSans;
  padding-left: 22px;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: 12px;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: #da251d;
  }
}

.btn-l {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  font-size: 12px;
  color: #1b1b1b;
  padding-right: 15px;

  .plan-icon {
    width: 15px;
    height: 15px;
    background: url("")
      no-repeat;
    background-size: 15px 15px;
  }
}
</style>
